<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>打印小票测试</title>
  <link href='../src/renderer/assets/css/print.css' rel='stylesheet' />
</head>

<body>
  <div id='bd'>打印小票测试</div>
</body>

<script>
  const { ipcRenderer } = require('electron')

  ipcRenderer.on('webview-print-render', (event, obj) => {
    document.title = obj.data.title;
    let html = '';
    switch (obj.flag) {
      // obj.flag 0：打印小票测试 1：打印标签测试 2：销售后自动打印等
      case 2:
        html = saledPrint(obj.data, obj.data.deviceName);
        break;
      default:
        html = obj.data.data;
        break;
    }
    document.getElementById('bd').innerHTML = 
    `<div style="width:${obj.data.width};margin-left:${obj.data.margin};">${html}</div>`;
  
    ipcRenderer.sendToHost('webview-print-do')

  })

  function saledPrint(obj, deviceName) {
      //执行渲染
      //执行渲染
      let thead = `<table 
          width="100%"
          cellpadding="0"
          cellspacing="0">
      <tr>
      <td colspan='4'>欢迎使用${deviceName}打印机</td>
      </tr>
      <tr>
      <td  colspan='4'>销售单号：${
        !obj.encryption ? obj.data.orderNum : "*********"
      }</td>
      </tr>
      <tr class='padTom'>
      <td  colspan='2'>收银机号：${deviceName}</td><td colspan='2'>收银员：${deviceName}</td>
      </tr>`;
      let tbody = `<tbody><tr class='topLine'>
      <td >品名</td>
      <td  class='textRight'>单价</td>
      <td  class='textRight'>数量</td>
      <td  class='textRight'>金额</td</tr>`;
      for (var i = 0; i < obj.data.shopsData.length; i++) {
        tbody += `<tr class='shoplist'> <td colspan='4'>${obj.data.shopsData[i].shopName}</td></tr>
      <tr><td  colspan='2' class='textRight'>${obj.data.shopsData[i].salePrice}</td>
      <td class='textRight'>${obj.data.shopsData[i].num}</td>
      <td class='textRight'>${
        obj.data.shopsData[i].acturalPrice
      }<br/><span class='BeforePrice'>${
          obj.data.shopsData[i].BeforePrice
            ? obj.data.shopsData[i].BeforePrice
            : ""
        }</span></td>
      </tr>`;
      }
      tbody += `
      <tr class='padTom'>
      <td  colspan='4'></td>
      </tr>
      <tr  class='topLine'>
      <td colspan="2">商品合计:</td>
      <td class='textRight'>${obj.data.shopNum}</td>
      <td class='textRight'>${obj.data.goodsSum}</td>
      </tr>
      <tr>
      <td colspan="4"><span class='left'>商品优惠:</span><span class='right'>${obj.data.goodsDis}</span></td>
      </tr>
      <tr  class='padTom'>
      <td colspan="4"><span class='left'>整单优惠:</span><span class='right'>${obj.data.wholeDis}</span></td>
      </tr>
      <tr class='topLine'>
      <td colspan="4"><span class='left'>应收:</span><span class='right'>${obj.data.acturalPay}</span></td>
      </tr>
      <tr>
      <td colspan="4"><span class='left'>现金:</span><span class='right'>${obj.data.cash}</span></td>
      </tr>
      <tr>
      <td colspan="4"><span class='left'>找零:</span><span class='right'>${obj.data.needChange}</span></td>
      </tr>
      <tr>
      <td colspan="4"><span class='left'>交易时间:</span><span class='right'>${obj.data.time}</span></td>
      </tr> `;
      let tfoot = `</tbody><tfoot>
      <tr>
      <td class='tfoot' colspan="4">谢谢惠顾，欢迎下次光临！</td>
      </tr>
      </tfoot></table>`;
      return thead + tbody + tfoot;
    } 
  
  </script>

</html>